<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>演员信息</title>
</head>
<body>
<h1>恭喜你，<span th:text="${username}"></span> 管理员登录成功！</h1>
<a th:href="@{/adminSuccessPage(username=${username}, page=0, size=10)}">用户信息</a>
<a th:href="@{/adminTicketsPage(username=${username}, page=0, size=10)}">购票信息</a>
<a th:href="@{/adminMoviesPage(username=${username}, page=0, size=10)}">电影信息</a>
<a th:href="@{/adminGenersPage(username=${username}, page=0, size=10)}">类别信息</a>
<a th:href="@{/adminDirectorsPage(username=${username}, page=0, size=10)}">导演信息</a>
<a th:href="@{/adminActorsPage(username=${username}, page=0, size=10)}">演员信息</a>
<a th:href="@{/adminReviewsPage(username=${username}, page=0, size=10)}">评论信息</a>

<!-- 新增演员按钮 -->
<button onclick="showAddActorForm()">新增演员</button>

<!-- 新增演员表单，默认隐藏 -->
<div id="addActorForm" style="display: none;">
    <h3>新增演员</h3>
    <form id="addActorFormData">
        <label for="addAname">演员名称:</label>
        <input type="text" id="addAname" name="aname" required><br>
        <label for="addBiography">介绍:</label>
        <input type="text" id="addBiography" name="biography"><br>
        <label for="addBirthdate">生日:</label>
        <input type="text" id="addBirthdate" name="birthdate"><br>
        <button type="button" onclick="submitAddActorForm()">提交</button>
        <button type="button" onclick="cancelAddActorForm()">取消</button>
    </form>
</div>

<!-- 添加搜索框和搜索按钮 -->
<form id="searchForm">
    <input type="hidden" th:name="username" th:value="${username}">
    <input type="hidden" th:name="size" th:value="${pageSize}">
    <input type="hidden" th:name="page" th:value="0">
    <label for="searchAname">根据演员名搜索:</label>
    <input type="text" id="searchAname" name="mname">
    <input type="button" value="搜索" onclick="searchActors()">
</form>

<h2>演员信息列表</h2>
<table>
    <thead>
    <tr>
        <th>演员编号</th>
        <th>演员名称</th>
        <th>介绍</th>
        <th>生日</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="actorTableBody">
    <tr th:each="actors : ${actors}">
        <td th:text="${actors.aid}"></td>
        <td th:text="${actors.aname}"></td>
        <td th:text="${actors.abiography}"></td>
        <td th:text="${actors.abirthdate}"></td>
        <td>
            <button th:onclick="'showEditForm(' + ${actors.aid} + ')'">修改</button>
            <button th:onclick="'deleteActor(' + ${actors.aid} + ')'">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<!-- 修改演员表单，默认隐藏 -->
<div id="editActorForm" style="display: none;">
    <h3>修改演员信息</h3>
    <form id="editActorFormData">
        <input type="hidden" id="editAid" name="aid">
        <label for="editAname">演员名称:</label>
        <input type="text" id="editAname" name="aname" required><br>
        <label for="editBiography">介绍:</label>
        <input type="text" id="editBiography" name="biography"><br>
        <label for="editBirthdate">生日:</label>
        <input type="text" id="editBirthdate" name="birthdate"><br>
        <button type="button" onclick="submitEditActorForm()">提交</button>
        <button type="button" onclick="cancelEditActorForm()">取消</button>
    </form>
</div>

<!-- 分页导航栏 -->
<div>
    <!-- 首页 -->
    <a th:href="@{/adminActorsPage(username=${username}, page=0, size=${pageSize})}">首页</a>

    <!-- 上一页 -->
    <a th:if="${currentPage > 0}" th:href="@{/adminActorsPage(username=${username}, page=${currentPage - 1}, size=${pageSize})}">上一页</a>

    <!-- 下一页 -->
    <a th:if="${currentPage < totalPages - 1}" th:href="@{/adminActorsPage(username=${username}, page=${currentPage + 1}, size=${pageSize})}">下一页</a>

    <!-- 末页 -->
    <a th:href="@{/adminActorsPage(username=${username}, page=${totalPages - 1}, size=${pageSize})}">末页</a>

    <!-- 显示当前页和总页数 -->
    <span>当前页: <span th:text="${currentPage + 1}"></span> / 总页数: <span th:text="${totalPages}"></span></span>
    <form th:action="@{/adminActorsPage}" method="get">
        <input type="hidden" th:name="username" th:value="${username}">
        <input type="hidden" th:name="size" th:value="${pageSize}">
        <label for="pageNumber">跳转到页数:</label>
        <input type="number" id="pageNumber" name="page" min="0" th:max="${totalPages - 1}" required>
        <input type="submit" value="跳转">
    </form>
</div>

<script>
    function searchActors() {
        const aname = document.getElementById('searchAname').value;
        const username = document.querySelector('input[name="username"]').value;
        const size = document.querySelector('input[name="size"]').value;
        const page = document.querySelector('input[name="page"]').value;

        fetch(`/actor/searchActor?aname=${aname}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const actors = data.actors;
                    const tableBody = document.getElementById('actorTableBody');
                    tableBody.innerHTML = '';

                    actors.forEach(actor => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                                <td>${actor.aid}</td>
                                <td>${actor.aname}</td>
                                <td>${actor.abiography}</td>
                                <td>${actor.abirthdate}</td>
                                <td>
                                    <button onclick="showEditForm(${actor.aid})">修改</button>
                                    <button onclick="deleteActor(${actor.aid})">删除</button>
                                </td>
                            `;
                        tableBody.appendChild(row);
                    });
                } else {
                    alert(data.error);
                }
            })
            .catch(error => {
                alert('查询演员信息失败：' + error.message);
            });
    }

    function showAddActorForm() {
        document.getElementById('addActorForm').style.display = 'block';
    }

    function cancelAddActorForm() {
        document.getElementById('addActorForm').style.display = 'none';
    }

    function submitAddActorForm() {
        const form = document.getElementById('addActorFormData');
        const formData = new FormData(form);
        const actor = {
            aname: formData.get('aname'),
            abiography: formData.get('biography'),
            abirthdate: formData.get('birthdate')
        };

        fetch('/actor/addActors', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(actor)
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    cancelAddActorForm();
                    searchActors();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                alert('添加演员信息失败：' + error.message);
            });
    }

    function showEditForm(aid) {
        document.getElementById('editActorForm').style.display = 'block';

        fetch(`/actor/infoActor?aid=${aid}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const actor = data.actors;
                    document.getElementById('editAid').value = actor.aid;
                    document.getElementById('editAname').value = actor.aname;
                    document.getElementById('editBiography').value = actor.abiography;
                    document.getElementById('editBirthdate').value = actor.abirthdate;
                } else {
                    alert(data.error);
                }
            })
            .catch(error => {
                alert('查询演员信息失败：' + error.message);
            });
    }

    function cancelEditActorForm() {
        document.getElementById('editActorForm').style.display = 'none';
    }

    function submitEditActorForm() {
        const form = document.getElementById('editActorFormData');
        const formData = new FormData(form);
        const actor = {
            aid: formData.get('aid'),
            aname: formData.get('aname'),
            abiography: formData.get('biography'),
            abirthdate: formData.get('birthdate')
        };

        fetch('/actor/updateActors', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(actor)
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    cancelEditActorForm();
                    searchActors();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                alert('修改演员信息失败：' + error.message);
            });
    }

    function deleteActor(aid) {
        if (confirm('确定要删除该演员信息吗？')) {
            fetch(`/actor/deleteActors/${aid}`, {
                method: 'DELETE'
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert(data.message);
                        searchActors();
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    alert('删除演员信息失败：' + error.message);
                });
        }
    }
</script>
</body>
</html>